<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"/>
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				
				margin: 0;
			}
			
			a{
				text-decoration: none;
				list-style: none;
				color: #ADD8E6;
				border-style: none;
				
			}
			#Oul{
				list-style: none;
				color: #808080;
				background-color:white;
				
			}

			#box{
				width: 1000px;
				
				height: 620px;
				
				background-color: white;
				
				margin: 0,auto;
				
				left:300px;
				
			}
			/* 百度助手标题 */
			#biaot{
				position: relative;
				
				top: 70px;
				
				left: 210px;
				
				color: #00CCFF;
				
				font-size: 250%;
				
				font-weight: normal;
				
				font-family: "arial black";
				
				
				text-align: center;
			}
			/* 搜索框的父级 */
			#biaotx{
				position: relative;
				
				top: 130px;
				
				left: 0px;
				
				/* border: 1px solid black; */
				
				height: 100px;
				margin: 0 auto;
			}
			/* 搜索框 */
			#k{
				width: 620px;
				
				height: 40px;
				
				position: relative;
				
				left: 400px;
				
				border-top-left-radius:7px;
				
				border-bottom-left-radius:7px;
				
				color:grey ;
				
				outline: none; 
				
				border: 2px solid whitesmoke;
			}
			#k:hover{
				
				-webkit-box-shadow:0 2px 6px 0 rgba(0,0,0,.2);
			}
			/* 搜索 */
			#search{
			
			    width: 92px;
			
			    height: 44px;
			
			    float: right;
				
				position: relative;
				
				left: 100px;
			
			    background:#55CCFF;
			
			    color: white;
				
				/* border: 2px solid red; */
			
			    text-align: center;
			
			    line-height: 44px;
			
			    cursor: pointer;
				
				border-top-right-radius:10px;/*右上弧度10像素*/
				
				border-bottom-right-radius:10px;/*右下弧度10像素*/
			}
			#search:hover{
				
				background-color: #00CCFF;
			}
			
			/* 功能的父级 */
			#gongneng{
				
				
				position: absolute;
				
				top: 290px;
				
				left: 350px;
				
				/* border: 1px solid black; */
				
				height: 400px;
				
				width: 840px;
				
				/* display: none; */
				
				
				
					
			}
			button{
				
				background-color: #00CCFF;
				border:0px solid #55CCFF;
				color: white;
				background-color: #55CCFF;
				text-decoration: none;
				width: 92px;			
				height: 44px;
				border-top-right-radius:10px;/*右上弧度10像素*/
				border-bottom-right-radius:10px;/*右下弧度10像素*/
				}
			}

			#sf{
				position: relative;
				left: 200px;
			}
			
			/* 八个小功能 */
			#lq{
				width: 190px;
				height: 100px;
				border: 2px solid skyblue;
				float: left;
				margin-left: 0px;
			}
			
			#lw{
				width: 190px;
				height: 100px;
				border: 2px solid skyblue;
				float: left;
				margin-left: 10px;
			}
			
			#le{
				width: 190px;
				height: 100px;
				border: 2px solid skyblue;
				float: left;
				margin-left: 10px;
			}
			
			#lr{
				width: 190px;
				height: 100px;
				border: 2px solid skyblue;
				float: left;
				margin-left: 10px;
			}
			
			#kq{
				width: 190px;
				height: 100px;
				border: 2px solid skyblue;
				float: left;
				margin-left: 0px;
				margin-top: 15px;
			}
			
			#kw{
				width: 190px;
				height: 100px;
				border: 2px solid skyblue;
				float: left;
				margin-left: 10px;
				margin-top: 15px;
			}
			
			#ke{
				width: 190px;
				height: 100px;
				border: 2px solid skyblue;
				float: left;
				margin-left: 10px;
				margin-top: 15px;
			}
			
			#kr{
				width: 190px;
				height: 100px;
				border: 2px solid skyblue;
				float: left;
				margin-left: 10px;
				margin-top: 15px;
			}
			#gongneng img{
				width: 60px;
				height: 60px;
				position: relative;
				top: 20px;
				left: 15px;
			}
			#gongneng h4{
				position: relative;
				top: -25px;
				left: 85px;
				color: #000000;
			}
			#gongneng a{
				color: #55CCFF;
			}
			#gongneng a:hover{
				color: lightblue;
			}
			#outr{
			width: 600px;
			/* height: 210px; */
			border: 1px solid whitesmoke;
			 position: relative;
			top: 130px;
			left: 450px;
			/* display: none; */
			background-color:thistle ;
			z-index: 9;
			} 
			#outr li{
				cursor: pointer;
			}
			#meinv{
				position: relative;
				top: 265px;
				left: 760px;
				width: 395px;
				height: 100px;
				border: 2px solid skyblue;
				text-align: center;
			
			}
			#meinv a{
				position: relative;
				top: -50px;
				color: skyblue;
			}
			#meinv img{
				width: 80px;
				height: 80px;
				position: relative;
				left: -120px;
				top: 10px;
			}
		
			#xiaohua{
				position: relative;
				top: 370px;
				left: 350px;
				width: 395px;
				height: 100px;
				border: 2px solid skyblue;
				text-align: center;
			
			}
			#xiaohua a{
				position: relative;
				top: -50px;
				color: skyblue;
			}
			#xiaohua img{
				width: 80px;
				height: 80px;
				position: relative;
				left: -120px;
				top: 10px;
			} 
			
		</style>
	</head>
	<body>
		<div id="box">
			<div id="biaot">
				百度搜索助手
			</div>
			<div id="biaotx">
				
				<input type="text" autofocus="autofocus" id="k" placeholder="请输入你想要搜索的内容">
				<div id="search"><button  id="ssss" onclick="f1()">搜索</button></div>
			</div>
			<div id="outr">
				 <ul id="Oul"></ul>
			</div>
			<div id="gongneng">
				
				<div id="sf">
					<div id="lq">
						<img src="img/20-电话.png" >
						<h4><a href="电话查询.html">电话查询</a></h4>
					</div>
					<div id="lw">
						<img src="/img/身份证国徽面.png" >
						<h4><a href="sfz">身份证查询</a></h4>
					</div>
					<div id="le">
						<img src="img/翻译.png" >
						<h4><a href="翻译.html">翻译</a></h4>
					</div>
					<div id="lr">
						<img src="/img/天气.png" >
						<h4><a href="">天气查询</a></h4>
					</div>
					
				</div>
				
				<div id="xf">
					
					<div id="kq">
						<img src="img/汇率转换.png" >
						<h4><a href="汇率转换.html">汇率转换</a></h4>
					</div>
					<div id="kw">
						<img src="img/IP地址获取.png" >
						<h4><a href="ip地址查询.html">IP地址查询</a></h4>
					</div>
					<div id="ke">
						<img src="/img/PM2.5_面.png" >
						<h4><a href="PM2.5.html">pm2.5查询</a></h4>
					</div>
					<div id="kr">
						<img src="/img/汽车，货车，卡车.png" >
						<h4><a href="车辆尾号限定.html">汽车尾号限定</a></h4>
					</div>
				</div>
			</div>
			<div id="xiaohua">
				<img src="/img/开心.png" >
				<h3><a href="xiaohua">开心一刻</a></h3>
			</div>
			<div id="meinv">
				<img src="/img/美女.png" >
				<h3><a href="meinv">美女图片福利</a></h3>
			</div>
			
			
			
			
			
		</div>
		
	</body>
	<script src="js/jQuery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">

    // 跳转到百度搜索
	   
	  function f1(){
		  if ("k"=="") {
		  
		  } else{
		  	var v=document.getElementById("k");
		  	location.href="http://www.baidu.com/baidu?wd="+v.value;
		  }
	     
	  }
	  // 搜索时显示文字
	  let Oinput = document.getElementById("k");
	  let Oul = document.getElementById("Oul");
	  			 
	     Oinput.oninput = function abc(){
			 if($("#k").val().trim()==""){
				$("#outr").hide();
			 }else{
				$("#outr").show();  
			 }
	         let script = document.createElement("script");
	         script.src = "http://suggestion.baidu.com/su?wd="+this.value+"&cb=fun";
	         document.body.appendChild(script);
	  }
	  function fun(str){
	       let strHtml = "";
	       for(let i=0;i<str.s.length;i++){
	           strHtml+=`<li>${str.s[i]}</li>`
	       }
	       
	       Oul.innerHTML = strHtml;  
	   }
	  console.log($("#k"))
	  $("#k").focus(function(){
		  $("#outr").show();
	  })
	  $("#Oul").on("click","li",function(){
		  location.href="http://www.baidu.com/baidu?wd="+$(this).text();
	  })
	  
	  
	  
	  // $("#k"). mouseover(function(){
	  			 //   $("#Oul").show();
	  // })
	  //  $("#k").mouseout(function(){
	  			 //   $("#Oul").hide();
	  //  })
	  
	  
	//   function butClick() {
	//       var val = document.getElementById("k").value;
	//           if(val.length === 0){
	//                   alert('搜索为空，请输入内容');
	//                   return false;
	//           }else{
	//                   var open_url = "https://www.baidu.com/s?ie=utf-8&wd=" + val;
	//                   window.open(open_url); 
	//           }
	  
	 
	//  document.onkeydown = function (e) {
	//      var theEvent = window.event || e;
	//      var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
	//      if (code == 13) {
	//          butClick();
	//      }
	//  }

	  /*$('#k').bind('keypress', function (event) { 
	     if (event.keyCode == "13") { 
	      $("#ssss").click();
	     }
	    })
		
		$("#biaot").click(function(){
			$("#outr").hide();
		})
		$("#gongneng").click(function(){
			$("#outr").hide();
		})
		$("#k").click(function(){
			$("#outr").show();
		})*/
		
			
	</script>
</html>
